
import React, { Component } from 'react';
import { Alert, StyleSheet, Text, View, ScrollView, Dimensions, PropTypes, Modal } from 'react-native';
import ButtonActionFunction from './wrapButtonActionFunction';
import WrapButtonCard from './wrapButtonCard';
import Welcome from '../welcome';
import TestFlexMode from '../testMode';
import FirstPageView from '../firstPageView';
import ReactNativeQRcode from '../secondComponent/reactNativeQrcode';
import ModalQRcode from './modalQRCode';


const actionFunction = new ButtonActionFunction;
const _windows = Dimensions.get('window');

const alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' +
    'catalysts for change. Dynamically revolutionize.';


class FirstHomePageView extends Component {
    static propTypes = {

    }

    constructor(props, context) {
        super(props, context);
        this._closeAction = this._closeAction.bind(this);

        this.state = {
            animationType: 'fade',// 'slide','fade', 'none'
            modalVisible: false,
            transparent: true,
        }
    };

    _setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    _onPressButton(index){
        if ( index === 2 ){
            this.setState({modalVisible:true});
        } else {
            const _router = actionFunction.getRouter(index);
            this.props.navigator.push(_router);
        }
    };

    _closeAction(){
        this.setState({modalVisible: false});
    }

    render() {
        return (
            <ScrollView style={styles.containerScrollView} >
                <View style={styles.container} >
                    <WrapButtonCard clickAction={this._onPressButton.bind(this)}/>
                    <Welcome/>
                    <Modal
                        animationType={this.state.animationType}
                        transparent={this.state.transparent}
                        visible={this.state.modalVisible}
                        onRequestClose={() => {this._setModalVisible(false)}}
                    >
                        <ModalQRcode
                            title='我的二维码'
                            linkUrl='http://facebook.github.ios/react-native/'
                            number='623165449661489'
                            closeAction={this._closeAction}
                        />
                    </Modal>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    containerScrollView: {
        backgroundColor: '#F5FCFF'
    },
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderColor:'#cccccc'
    },
});

export default FirstHomePageView;